import React, { ReactElement, useEffect, useState } from 'react';
import { getShopDoor } from '@/api/shop/shop-door';
import {
  Button,
  Tag,
  Space,
  Menu,
  Table,
  Dropdown,
  DatePicker,
  Popconfirm,
  message,
  Modal,
} from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import {
  SettingOutlined,
  EyeOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
// import request from 'umi-request';

interface Props {}

export default function index({}: Props): ReactElement {
  const { RangePicker } = DatePicker;
  type GithubIssueItem = {
    url: string;
    id: number;
    number: number;
    title: string;
    address: string;
    idcard: string;
    telephone: string;
    labels: {
      name: string;
      color: string;
    }[];
    state: string;
    comments: number;
    // created_at: string;
    // updated_at: string;
    // closed_at?: string;
  };
  const columns: ProColumns<GithubIssueItem>[] = [
    // {
    //   dataIndex: 'index',
    //   valueType: 'indexBorder',
    //   width: 48,
    // },
    {
      title: '用户名',
      dataIndex: 'shopName',
      copyable: true,
    },

    {
      title: '账户',
      dataIndex: 'account',
      search: false,
    },
    {
      title: '地址',
      // dataIndex: 'address',
      search: false,
      render: (text, record) => {
        return [<span>{record.address ? record.address : ''}</span>];
      },
    },
    {
      title: '电话',
      // dataIndex: 'telephone',
      search: false,
      // hideInSearch: true,
      render: (text, record) => {
        return [<span>{record.telephone ? record.telephone : ''}</span>];
      },
    },
    {
      title: '身份证号',
      // dataIndex: 'idcard',
      hideInSearch: true,
      render: (text, record) => {
        return [<span>{record.idcard ? record.idcard : ''}</span>];
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <EyeOutlined
          onClick={() => {
            showModal(record);
          }}
          key="view"
          style={{ color: '#42B983' }}
        />,
      ],
    },
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [data, setData] = useState([]);
  const showModal = (record: any) => {
    console.log(data, 'data');
    setData(record.serviceinfoList);
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  //查看详情表格的列定义
  const col = [
    {
      title: '服务名称',
      dataIndex: 'name',
    },
    {
      title: '价格',
      dataIndex: 'price',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '类型',
      dataIndex: 'servicetype',
    },
  ];
  return (
    <div>
      <ProTable<GithubIssueItem>
        columns={columns}
        // actionRef={actionRef}
        // request={async (params = {}, sort, filter) => {
        //   const { data } = await getRole()
        //   console.log(data);

        // }}
        request={async (params = {}, sort, filter) => {
          // console.log(params);
          const { shopName } = params;

          let searchData = {
            shopName,
          };
          const { data } = await getShopDoor(searchData);
          console.log(data, 'ata');

          return {
            data: data.rows,
            success: true,
            total: data.total,
          };
        }}
        // rowSelection={{
        //   // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
        //   // 注释该行则默认不显示下拉选项
        //   selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        // }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        // form={{
        //   // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        //   syncToUrl: (values, type) => {
        //     if (type === 'get') {
        //       return {
        //         ...values,
        //         created_at: [values.startTime, values.endTime],
        //       };
        //     }
        //     return values;
        //   },
        // }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        // headerTitle={
        //   <>
        //     <AddRole></AddRole>
        //     <Button>删除</Button>
        //   </>
        // }
      />
      {data.length ? (
        <Modal
          title="用户信息"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          width={744}
        >
          <Table columns={col} dataSource={data} rowKey="id" />
        </Modal>
      ) : (
        <></>
      )}
    </div>
  );
}
